<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Бангкок Экспресс: Корзина</title>

  <link rel="stylesheet" href="/assets/styles/common.css" />
  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="../1-task/index.css" />
  <link rel="stylesheet" href="../../7-module/2-task/index.css" />

</head>

<body>
  <header class="header container">
    <h1 class="heading logo">Бангкок Экспресс</h1>
    <h3 class="subheading">Отличная еда・Бесплатная доставка・Лучшие цены</h3>

    <div data-cart-icon-holder>
      <!--СЮДА ВСТАВЛЯЕТСЯ CART-ICON-->
    </div>
  </header>

  <main>
    <div class="container" style="padding-bottom: 40px;">
      <h2 class="section-heading">Наше Меню</h2>

      <button class="button" data-add-product-id="laab-kai-chicken-salad">Добавить товар 1</button>
      <button class="button" data-add-product-id="som-tam-papaya-salad">Добавить товар 2</button>
      <button class="button" data-add-product-id="tom-yam-kai">Добавить товар 3</button>
    </div>

  </main>

  <script type="module">
    import Cart from './index.js';
    import CartIcon from '../1-task/index.js';

    let cartIcon = new CartIcon();
    let cartIconHolder = document.querySelector('[data-cart-icon-holder]');
    cartIconHolder.append(cartIcon.elem);

    let products = [
      {
        "name": "Laab kai chicken salad",
        "price": 10,
        "category": "salads",
        "image": "laab_kai_chicken_salad.png",
        "id": "laab-kai-chicken-salad",
        "spiciness": 2
      },
      {
        "name": "Som tam papaya salad",
        "price": 9.5,
        "category": "salads",
        "image": "som_tam_papaya_salad.png",
        "id": "som-tam-papaya-salad",
        "spiciness": 0
      },
      {
        "name": "Tom yam kai",
        "price": 7,
        "category": "soups",
        "image": "tom_yam.png",
        "id": "tom-yam-kai",
        "spiciness": 3
      },
    ]

    let cart = new Cart(cartIcon);

    document.addEventListener('click', (event) => {
      let button = event.target.closest('.button');
      if (!button) {
        return;
      }

      let addProductId = button.dataset.addProductId;
      let productToAdd = products.find((product) => product.id === addProductId);

      if (productToAdd) {
        cart.addProduct(productToAdd);
      }
    })
  </script>
</body>

</html>
